<template>
  <div ref="Graph"></div>
</template>

<script setup lang="ts">
import {initData} from "../common/initData";
import {FlowGraph} from "../common/FlowGraph";
import {onMounted, PropType, toRefs, ref, watch, onBeforeUnmount} from "vue";
import {stencilNodeOptions} from "../common/Stencil/config";
import {graphWidth, graphHeight} from "../config/index";

// 引入注册节点 否则节点类型未定义报错
const groups = stencilNodeOptions.map((e) => e.group);

const emit = defineEmits(["onReady", "update:isReady"]);

const Graph = ref<HTMLElement | undefined>();

let graph: any = null;
onMounted(() => {
  // 创建画布
  graph = FlowGraph.init({
    container: Graph.value,
    width: 800,
    height: 300,
    resizing: false,
    // // 是否开启画布拖拽
    // panning: false,
    // // 是否显示画布网格
    // grid: {
    //   visible: false
    // },
    // // 点选框选
    // selecting: false,
    panning: false,//画布是否可以拖拽平移，默认禁用。
    mousewheel: false,// 鼠标滚轮缩放，默认禁用
    translating: {
      // 限制节点移动

    },
    // interacting: function (cellView: CellView) {
    //   // 节点和边是否可交互
    //  return false
    // },
  });

  graph.fromJSON(initData);

  graph.centerContent();
  emit("onReady", graph);
  emit("update:isReady", true);
});

onBeforeUnmount(() => {
  graph?.dispose();
  graph = null;
});
</script>
